<template>
  <div class="app-container">

    <u-page title="仓库维护">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="楼层" prop="floor">
            <el-select v-model="listQuery.floor" placeholder="请选择楼层" clearable>
              <el-option v-for="item in floors" :label="item.code" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库编号" prop="roomname">
            <el-input v-model="listQuery.roomname" placeholder="请输入仓库编号" style="width: 280px" clearable />
          </el-form-item>
          <el-form-item label="所属课室" prop="blongdeptid">
              <el-cascader
                ref="depts"
                v-model="listQuery.deptid"
                :options="departments"
                :show-all-levels="false"
                @change="handleQuerydeptChanged"
              />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="hdlOpen">
              {{ textMap['create'] }}
            </el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right >
          <el-table-column label="操作" align="center" fixed="right" >
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.roomname)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" width="600px" @confirm="dialogStatus==='create'? hdlCreate():hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="100px">
        <el-row>
          <el-form-item prop="floor" label="楼层">
            <el-select v-model="dataForm.floor" placeholder="请选择楼层" clearable>
              <el-option v-for="item in floors" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item prop="roomName" label="仓库名称">
            <el-input v-model="dataForm.roomname" placeholder="" clearable />
          </el-form-item>
          <el-form-item prop="blongDeptid" label="所属部门">
<!--            <el-select v-model="dataForm.blongdeptid" placeholder="请选择部门" clearable @change="handleDeptId">-->
<!--              <el-option v-for="item in departments" :label="item.deptname" :value="item.deptid" />-->
<!--            </el-select>-->
            <el-cascader
              ref="pickdepts"
              v-model="dataForm.blongdeptid"
              :options="departments"
              :show-all-levels="false"
              @change="handlePickdeptChanged"
            />
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <textarea v-model="dataForm.remark" style="width:80%;height: 150px;" />
          </el-form-item>
        </el-row>
      </el-form>
    </u-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      api: this.$u.api.OpcenWhroom,
      dataapi: this.$u.api.OpcenMaintain,
      // 楼层
      floors: [],
      departments: [],
      textMap: {
        update: '编辑仓库',
        create: '新增仓库'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        floor: [
          { required: true, message: '请选择楼层', trigger: ['change'] }
        ],
        roomname: [
          { required: true, message: '请填写仓库名称', trigger: ['blur'] }
        ]
      },
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listLoading: false,
      list: [],
      // 表格
      columns: [
        {
          prop: 'floor',
          label: '楼层'
        },
        {
          prop: 'roomname',
          label: '仓库名称'
        },
        {
          prop: 'blongdeptname',
          label: '所属课室'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'createdby',
          label: '创建人'
        },
        {
          prop: 'createdat',
          label: '创建时间',
          sortable: true,
          timestamp: true
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        warehouseid: '',
        floor: '',
        deptid: ''
      }
    }
  },
  mounted() {
    this.getFloors()
    this.getDepartments()
  },
  methods: {
    // 加载楼层
    getFloors() {
      const self = this
      self.dataapi.floors().then(res => {
        this.floors = res.data
      })
    },
    // 加载部门
    getDepartments() {
      const self = this
      self.dataapi.deptList().then(res => {
        this.departments = res.data
      })
    },
    handleQuerydeptChanged() {
      const self = this
      self.listQuery.deptname = this.$refs['depts'].getCheckedNodes()[0].label
      self.listQuery.deptid = this.$refs['depts'].getCheckedNodes()[0].value
    },
    // 选择课室功能
    // handleDeptId() {
    //   let obj = {}
    //   obj = this.departments.find((item) => item.deptid === this.dataForm.blongdeptid)
    //   this.dataForm.blongdeptname = obj.deptname
    // },
    handlePickdeptChanged() {
      const self = this
      self.dataForm.blongdeptname = this.$refs['pickdepts'].getCheckedNodes()[0].label
      self.dataForm.blongdeptid = this.$refs['pickdepts'].getCheckedNodes()[0].value
    },
    handleFilter() {
      this.hdlFilter()
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
}
</style>
